<template>
  <div id="variable">
    <div id="mainBox">
      <div id="boxTit">
        <span class="tit">变量管理</span>
        <i
          class="el-icon-circle-plus-outline"
          @click="appendVar"
        />
      </div>
      <div id="helpmain">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            label="选择"
            type="selection"
            width="30"
          />
          <el-table-column
            prop="varKey"
            label="变量名"
            width="180"
          >
            <template slot-scope="scope">
              <el-input
                v-show="!scope.row.varname"
                v-model="scope.row.varKey"
                style="width:100px;"
              />
              <p v-show="scope.row.varname">{{ scope.row.varKey }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="decrypt"
            label="变量描述"
          >
            <template slot-scope="scope">
              <el-input
                v-show="!scope.row.vardesc"
                v-model="scope.row.decrypt"
                style="width:300px;"
              />
              <p v-show="scope.row.vardesc">{{ scope.row.decrypt }}</p>
            </template>

          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.vardesc"
                type="text"
                size="small"
                @click="upData($event,scope)"
              >修改</el-button>
              <el-button
                v-else
                type="text"
                size="small"
                @click="saveData(scope)"
              >保存</el-button>
              <el-button
                type="text"
                size="small"
                @click="delData(scope)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { varList, varSave, varDelete } from '@/api/page'

export default {
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    this.xuanran()
  },
  methods: {
    upData(event, obj) {
      obj.row.vardesc = false
      this.$set(this.tableData, this.tableData[obj.$index], obj.row)
    },
    appendVar() {
      var obj = {
        varname: false,
        vardesc: false
      }
      this.tableData.push(obj)
    },
    saveData(obj) {
      if (obj.row.varname) {
        varSave(obj.row).then(response => {
          if (response.data.code == 'SUCCESS') {
            this.xuanran()
          }
        })
      } else {
        varSave(obj.row).then(response => {
          if (response.data.code == 'SUCCESS') {
            this.xuanran()
          }
        })
      }
    },
    delData(obj) {
      var del = {
        id: obj.row.id
      }
      varDelete(del).then(response => {
        if (response.data.code == 'SUCCESS') {
          this.xuanran()
        }
      })
    },
    xuanran() {
      var obj = {
        condition: {
          varKey: ''
        }
      }
      varList(obj).then(response => {
        if (response.data.code == 'SUCCESS') {
          this.tableData = response.data.data.records
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].varname = true
            this.tableData[i].vardesc = true
          }
        }
      })
    }
  }
}
</script>
<style>
#variable {
  margin-top: 20px;
  margin-left: 20px;
}
#variable .el-input {
  margin-top: 10px;
  margin-right: 10px;
  width: 200px;
}
#variable #mainBox {
  width: 99%;
  border: 1px solid #623f18;
}
#variable #mainBox #boxTit {
  height: 40px;
  width: 100%;
  background: #623f18;
}
#variable #helpmain {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 20px;
  margin-bottom: 20px;
}
#variable #mainBox #boxTit i {
  cursor: pointer;
  float: right;
  line-height: 40px;
  margin-right: 10px;
  font-size: 25px;
  color: #fff;
}
#variable #mainBox #boxTit .tit {
  margin-left: 20px;
  font-size: 20px;
  color: #fff;
  line-height: 40px;
}
#variable .ql-toolbar {
  display: none;
}
#variable .ql-container {
  border: none;
}
#variable .el-collapse-item__header {
  font-weight: bold;
  color: #623f18;
}
</style>
